<template>
  <el-form
    ref="formRef"
    :model="model"
    label-position="left"
    :rules="rules"
  >
    <el-form-item
      prop="name"
      label="会议室名称"
      :label-width="labelWidth"
    >
      <el-input
        v-model="model.name"
        placeholder="请输入会议室名称"
      />
    </el-form-item>

    <el-form-item
      prop="address"
      label="会议室位置"
      :label-width="labelWidth"
    >
      <el-input
        v-model="model.address"
        placeholder="请输入会议室位置"
      />
    </el-form-item>

    <el-form-item
      prop="quantity"
      label="容纳数量"
      :label-width="labelWidth"
    >
      <el-input-number
        v-model="model.quantity"
        :min="1"
        :max="1000"
        placeholder="请输入容纳数量"
      />
    </el-form-item>

    <el-form-item
      prop="state"
      label="是否可用"
      :label-width="labelWidth"
    >
      <el-switch
        v-model="model.state"
        :inactive-value="0"
        :active-value="1"
      />
    </el-form-item>

    <el-form-item
      prop="notes"
      label="备注"
      :label-width="labelWidth"
    >
      <el-input
        v-model="model.notes"
        type="textarea"
        :rows="3"
        placeholder="请输入备注信息"
      />
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'ConferenceRoomForm',
  props: {
    model: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      labelWidth: '100px',
      rules: {
        name: [{ required: true, message: '请输入会议室名称', trigger: ['change', 'blur'] }],
        quantity: [{ required: true, message: '请输入容纳数量', trigger: ['change', 'blur'] }],
        state: [{ required: true, message: '请选择是否可用', trigger: ['change', 'blur'] }],
        address: [{ required: true, message: '请输入会议室地址', trigger: ['change', 'blur'] }]
      }
    }
  },
  methods: {
    resetFields() {
      this.$refs.formRef.resetFields()
    },

    validate() {
      return new Promise(resolve => {
        this.$refs.formRef.validate(flag => {
          resolve(flag)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
